html,body {
  height: 100%;
  background: url("../images/jc-bg.png") no-repeat!important;
  overflow: hidden;
  background-size: 100% 100%!important;
}
#fullScreenQj{
  position: fixed;
  width: 98%;
  height: calc(100% - 85px);
  top: 85px;
  margin: 0;
  padding: 0;
  border: 0;
  left: 1%;
  z-index: 999;
  display: none;
}
.chart-qp{
  position: fixed!important;
  width: 98%!important;;
  height: calc(100% - 85px)!important;
  background: rgba(0,0,0,.8) !important;
  top: 85px;
  margin: 0;
  padding: 0;
  border: 0;
  left: 1%;
  z-index: 999;
}
#close{
  position: fixed;
  right: 15px;
  display: none;
  z-index: 1000;
  top: 85px;
}
#chart_box{
  height: calc(100% - 95px);
  height: -webkit-calc(100% - 95px);
  height: -moz-calc(100% - 95px);
  position: relative;
  top: 95px;
  .box-header{
    height: 40px;
    background: #000;

    h4{
      height: 40px;
      line-height: 40px;
      color: #fff;
      margin: 0;
      padding-left: 68px;

    }
  }
  .left-box{
    width: 33%;
    height: 99%;
    font-size: 0;
    vertical-align: top;
    display: inline-block;

    .map-box{
      height: 48%;
      padding-left: 5%;
      .box-header{
        background-image: url("../images/dtll.png") ;
        background-repeat: no-repeat;
        background-position: 20px 5px;
      }
      .left-chart{
        height: calc(100% - 40px);
        height: -webkit-calc(100% - 40px);
        height: -moz-calc(100% - 40px);

      }
    }
    .qj-box{
      height: 50%;
      position: relative;
      top: 2%;
      padding-left: 5%;
      .left-chart{
        position: relative;
        height: calc(100% - 40px);
        height: -webkit-calc(100% - 40px);
        height: -moz-calc(100% - 40px);


      }
      .box-header{
        background-image: url("../images/zyll.png") ;
        background-repeat: no-repeat;
        background-position: 20px 5px;
        h4{
          display: inline-block;
        }
        img{
          height: 25px;
          width: 25px;
          float: right;
          margin-right: 5px;
          margin-top: 8px;
        }
        .toggle{
          font-size: 16px;
          float: right;
          margin: 0;
          padding: 0;
          color: #fff;
          li{
            height: 36px;
            line-height: 36px;
            width: 90px;
            float: left;
            text-align: center;
            color: #fff;
            cursor: pointer;
            margin-top: 2px;
          }
          .toogle-active{
            background: #748998;
          }
        }
      }
    }
  }
  .right-box{
    width: 66%;
    margin-left: 1%;
    padding-right: 1%;
    height: 99%;
    float: right;
    display: inline-block;
    vertical-align: top;
    .charts-header{
      height: 40px;
      background: #000;
      color: #fff;
      background-image: url("../images/ysll.png") ;
      background-repeat: no-repeat;
      background-position: 20px 7px;
      position: relative;
      h4{
        height: 40px;
        padding-left: 68px;
        display: inline-block;
        line-height: 40px;
        margin: 0;
        vertical-align: top;

      }
      .f{
        height: 40px;
        vertical-align: top;
        display: inline-block;
        line-height: 40px;
        font-size: 14px;

      }
    }
    .right-chart{
      height: calc(99% - 40px);
      height: -webkit-calc(99% - 40px);
      height: -moz-calc(99% - 40px);
      position: relative;
      width: 100%;

      overflow: hidden;
      top: 1%;
      .chart-toogle{
        height: 100%;
        position: absolute;
        width: 100%;

      }
      .toogle{
        position: absolute;
        bottom: 0;
        left: 50%;
        display: none;
        color: #fff;
        transform: translateX(-50%);
          span{
          color:#fff;

        }
        #prevNum{
          color:#86c3f6;
          margin-left: 5px;
        }
        #nextNum{
          margin-right: 5px;
        }
      }
      .row{
        margin: 0;
        width: 100%;
        position: absolute;
        height: calc(100% - 50px);
        padding: 0;

        .col-md-4{
          height: 33.33333333%;
          margin-bottom: 10px;
          padding-left: 10px;
          padding-right: 0;
          &:nth-of-type(1),&:nth-of-type(4),&:nth-of-type(7){
            padding-right: 0;
            padding-left: 0;
          }
          &:nth-of-type(8),&:nth-of-type(9),&:nth-of-type(7) {
            margin: 0;
          }
          .chart_{
            background: #181818;
            height: 100%;
            .chart-tit{
              height: 40px;
              width: 80%;
              margin-left: 5%;
              position: relative;
              line-height: 40px;
              border-bottom: 1px solid #2E353B;
              i{
                content: '';
                display: block;
                position: absolute;
                width: 4px;
                height: 20px;
                background: #2A60CD;
                top: 9px;
                left: 0;
              }
              .tit{
                padding-left: 15px;
                font-size: 16px;
                color: #fff;
              }
            }
            .charts{
              height: calc(100% - 40px);
              height: -moz-calc(100% - 40px);
              height: -webkit-calc(100% - 40px);
              position: relative;
              &+.notData{
                display: none;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                font-size: 1.5vw;
                color: #8c8c8c;
                margin: 0;
              }
            }
          }
        }

    }
    }

  }
}
.btn-group, .btn-group-vertical{
  margin-right: 3%;
  margin-left: 3%!important;
}
.select{
      text-align: right;
  float: right;
  width: calc(100% - 140px);
  width: -webkit-calc(100% - 140px);
  width: -moz-calc(100% - 140px);
  .name{
    font-size: 14px;
    vertical-align: text-bottom;

      margin-left: 3%;

  }
  .datainp{
    vertical-align: top;
    margin-top: 8px;

  }
}
#qj{
  height: 100%;
  width: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  padding: 0;
  border: 0;
}
.chart-qp-icon{
  width: 25px;
  height: 25px;
  position: absolute;
  right: -16%;
  top: 9px;
}
.search{
  float: right;
  margin-right: 1%;
  width: calc(100% - 157px);
  vertical-align: middle;
}
.select,#searchBox{
  display: inline-block;
  vertical-align: top;
  height: 40px;
  line-height: 40px;


}
.bootstrap-select.btn-group .dropdown-menu{
  height: 250px;
  width: 220px;
}
.bootstrap-select > .dropdown-toggle{
  margin-top: 3px;
}


.demand{
  height: 35px;
  display: inline-block;
  width: 20%;
  margin-top: 2px;
}
.name{
  position: relative;
  top: 4px;
}
.bootstrap-select{
}
.datainp{
   min-width: 150px;
  width: 150px;   padding-top: 2px;height: 32px;
  line-height: 32px;      position: relative;
  top: 3px;
  padding-left: 15px;border:1px #A5D2EC solid;color: #333}
.datep{ margin-bottom:40px; line-height:25px; margin-right:15px;}
.wicon{background-image: url(""); background-repeat:no-repeat; background-position:right center;}

.bootstrap-select.btn-group .no-results{
  color:#333
}
@media (max-width: 1450px) {
  .name{
    margin-left: 0!important;
  }
}
